<template>
  <div class="page-warp h-f bg-grey-200" :style="CC_PAGE_STYLE">
    <div class="header-warp">
      <div class="sticky-headers bg-white">
        <div class="form-warp bg-white" ref="headerForm">
          <uni-forms
            class-name="borderless"
            label-width="120px"
            label-align="left"
            :modelValue="form"
            :rules="formRules"
            ref="formRef"
          >
            <uni-forms-item label="生产产线" name="bwaId" required>
              <uni-data-select
                :localdata="bwaData.rows"
                v-model="form['bwaId']"
                :placeholder="b_PLACEHOLDER_STR('生产产线', COM_TYPE.SELECT)"
                valueKey="bwa_id"
                labelKey="bwa_name"
                @select="bwaChange($event, row, index)"
              />
            </uni-forms-item>
          </uni-forms>
        </div>
      </div>
    </div>

    <div class="f-warp">
      <div class="fillet">
        <span class="fillet__text">工序</span>
      </div>
      <div class="content-warp">
        <div v-for="(item, index) in [1, 2, 3, 4, 5]" :key="index">test</div>
      </div>
    </div>
    <div class="form-footer">
      <div class="footer-warp">
        <div class="footer__btn">
          <div class="btn">
            <button
              class="uni-btn"
              type="primary"
              @click="confirm(0)"
              :loading="loadingStore.ILOADING"
            >
              保存
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { useStaticTypeDictionaries } from '../../components/StaticDictionary/StaticTypeDictionaries'
import { useLoading } from '../../store/LoadingStore'
import { useMessage } from '../../store/MessageStore'
import { usePageHeaderForm } from '../../hooks/PageHeaderForm'
import { PageUtil } from '../../utils/PageUtil'
import InputItemSelector from '../../components/InputItemSelector.vue'
import { useFormServ } from '../../hooks/FormServ'
import { useDictionaryStore } from '../../store/DictionaryStore'
import { useStockResStore } from '../../store/StockResulting'
import { StringUtils } from '../../utils/StringUtils'
import { CONVERT_TYPE } from '../../utils/convertable/Consts'
import moment, { Ls } from 'dayjs'

const headerForm = ref(null)
const formRef = ref(null)
const biiDialog = ref(null)

const { COM_TYPE, b_PLACEHOLDER_STR } = useFormServ()

const { KEYS, O2A } = useStaticTypeDictionaries()
const loadingStore = useLoading()
const stockResStore = useStockResStore()
const msgStore = useMessage()
const dictStore = useDictionaryStore()
const { CC_PAGE_STYLE } = usePageHeaderForm(headerForm)

const pageParams = ref({})
const form = reactive({})
const formRules = ref({
  iioApplyDate: {
    rules: [
      {
        required: true,
        errorMessage: ' '
      }
    ]
  },
  iioBussTypeCode: {
    rules: [
      {
        required: true,
        errorMessage: ' '
      }
    ]
  }
})
const bwlData = reactive({
  rows: []
})

const isview = computed(() => {
  const { __view = false } = pageParams.value
  return __view
})

const isadjust = computed(() => {
  const { __adjust = false } = pageParams.value
  return __adjust
})
//#endregion Data

//#region Method
const queryData = function () {
  dictStore
    .getBwaList({
      limit: -1,
      size: -1,
      bwa_state: 1
    })
    .then((res) => {
      const { Rows = [] } = res || {}
      bwaData.rows = Rows
    })

  const { ivoId: id, bwaId } = form

  dictStore
    .getBwlList({
      limit: -1,
      size: -1,
      bwl_state: 1,
      bwa_id: bwaId
    })
    .then((res) => {
      const { Rows = [] } = res || {}
      bwlData.rows = Rows
    })
}

const bwaData = reactive({
  rows: []
})
const bwaChange = function (e, row, index) {
  const { bwa_id, bwa_name, bwa_code } = e
  form.bwaId = bwa_id
  form.bwaName = bwa_name
  form.bwaCode = bwa_code

  dictStore
    .getBwlList({
      limit: -1,
      size: -1,
      bwl_state: 1,
      bwa_id
    })
    .then((res) => {
      const { Rows = [] } = res || {}
      bwlData.rows = Rows
    })
}

const dialog = reactive({
  adj: {
    show: false,
    msg: '确定要调账吗?'
  }
})

onLoad((params) => {
  let _p = PageUtil.parseParam(params)
  let { row: p } = _p
  Object.entries(p).forEach(([key, value]) => {
    form[key] = value
    pageParams.value[key] = value
  })

  queryData()
})

onReachBottom(() => {
  console.log('bottom')
})
</script>

<style lang="scss" scoped>
@import '@/assets/PageCommon.scss';
// @import "@/assets/PageHeaderForm.scss";

.page-warp {
  .header-warp {
    &:after {
      height: 0px;
    }
    .form-warp {
      padding: 0 12px;
      padding-right: 0;
    }
  }
  .f-warp {
    background-color: #fff;
    .content-warp {
      padding: 0 12px;
      padding-right: 0;
      display: flex;
      flex-direction: column;
      border: 1px solid #e5e5e5;
    }
  }
}
</style>
